import React, { PureComponent } from 'react';
import { Typography, List, Card, Icon, Popover, Form, Input } from 'antd';
import styles from './index.less';
import { withRemove } from './index';
import TopicModal from '../TopicModal';

const { Text } = Typography;

@withRemove
class TopicComponent extends PureComponent {
  constructor(props) {
    super(props);
    const { title, content } = this.props.data;
    this.state = {
      title,
      content: content || {},
      // 初次添加，默认打开选择弹框
      visible: typeof content === 'undefined',
    };
  }

  handleChange = e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    data.title = value;
    data.hideTitle = !value;
    this.props.onChange(data);
    this.setState({ title: value });
  };

  handleRemove = articleId => {
    this.setState(prevState => {
      const { content } = prevState;
      delete content[articleId];
      const { data } = { ...this.props };
      data.content = content;
      this.props.onChange(data);
      return { content: { ...content } };
    });
  };

  handleTopicSelection = articles => {
    const { data } = { ...this.props };
    const { content } = { ...this.state };
    articles.forEach(article => {
      content[article.articleId] = article;
    });
    data.content = content;
    this.props.onChange(data);
    this.setState({ content });
  };

  render() {
    const { title, content, visible } = this.state;
    const articleIds = Object.keys(content);
    return (
      <div className={styles.topic}>
        <Popover
          placement="right"
          trigger="click"
          content={
            <Form.Item label="标题内容" className={styles.mb0}>
              <Input placeholder="输入标题内容" value={title} onChange={this.handleChange} />
            </Form.Item>
          }
        >
          <Typography>
            <Text type={title ? '' : 'secondary'}>
              {title ? `${title}（相关标题）` : '这里编辑标题（相关标题）'}
            </Text>
          </Typography>
        </Popover>
        <List
          grid={{
            column: 3,
            gutter: 10,
          }}
          dataSource={articleIds.concat(false)}
          renderItem={articleId => (
            <List.Item>
              {articleId ? (
                <Card hoverable cover={<img src={content[articleId].cover} alt="" height={95} />}>
                  {content[articleId].title}
                  <Icon
                    type="close-circle"
                    theme="twoTone"
                    onClick={() => this.handleRemove(articleId)}
                  />
                </Card>
              ) : (
                <Card hoverable className="add" onClick={() => this.setState({ visible: true })}>
                  <Icon type="plus" />
                </Card>
              )}
            </List.Item>
          )}
        />
        <TopicModal
          visible={visible}
          onSuccess={this.handleTopicSelection}
          disabledRowKeys={articleIds}
          params={{ articleTypes: [10] }}
          onCancel={() => this.setState({ visible: false })}
        />
      </div>
    );
  }
}
export default TopicComponent;
